<template>
	<h2>setup与ref的基本使用</h2>
	<h3>{{ count }}</h3>
	<button @click="updateCount">更新数据</button>
</template>

<script lang="ts">
// definecomponent函数，就是定义一个组件，内部可以传入一个配置对象
import { defineComponent, ref } from "vue"

// 暴漏出去一个定义好的组件
export default defineComponent({
	name: "App",
	// 需求：页面打开有一个数据，点击按钮更新数据
	// vue2实现
	// data() {
	//     return {
	//         count: 0,
	//     };
	// },
	// methods: {
	//     updateCount() {
	//         this.count++;
	//     },
	// },

	// vue3实现
	// setup是组合API的入口函数
	setup() {
		// 变量
		// let count = 0; //此时的数据不是响应式数据
		const count = ref(0)
		function updateCount() {
			// 报错：count是一个ref对啊ing，对象是不能进行count++的
			// count++;
			count.value++
		}
		// 返回的是一个对象
		return {
			// 属性
			count,
			// 方法
			updateCount
		}
	}
})
</script>
